<template>
    <div class="fo-all">
        <img class="img1" style="margin-top: -1px" src="../../../static/img/aa.jpg"/>
        <div class="re-title">找回密码</div>
        <div class="re-box">
            <div class="re-form">
                <el-form :model="ruleForm" ref="ruleForm"  class="demo-ruleForm" label-width="100px">
                    <el-form-item  prop="studentId" label="学号/工号">
                        <el-input v-model="ruleForm.studentId" placeholder="学号/工号"></el-input>
                    </el-form-item>
                    <el-form-item  prop="email" label="E-mail">
                        <el-input v-model="ruleForm.email" style="width: 160px" placeholder="邮箱" ></el-input>
                        <el-button type="primary"@click="yanzma('email')" v-show="show">点击获取验证码</el-button>
                        <el-button type="primary" v-show="!show" :loading="true">{{count}}s后重试</el-button>
                    </el-form-item>
                    <el-form-item  prop="number" label="验证码">
                        <el-input v-model="ruleForm.number" placeholder="验证码" ></el-input>
                    </el-form-item>
                    <el-form-item  prop="newpassword" label="新密码">
                        <el-input v-model="ruleForm.newpassword" placeholder="新密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item  prop="newpassword1" label="确认密码">
                        <el-input v-model="ruleForm.newpassword1" placeholder="确认密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="totushi" style="width: 100%">立即找回</el-button>
                        <div class="re-login">点击<a class="re-a" @click="tologin">返回登录</a>……</div>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                count: '',
                timer: null,
                ruleForm: {
                    studentId:'',
                    email:'',
                    newpassword:'',
                    number:'',
                    newpassword1:''
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            tologin(){
                this.$router.push('/login');
            },
            // totushi(){
            //     this.$axios.put('/text/retrievepassword?'+
            //         'studentId='+this.ruleForm.studentId+
            //         '&email='+this.ruleForm.email+
            //         '&number='+this.ruleForm.number+
            //         '&newpassword='+this.ruleForm.newpassword
            //     ).then((res)=>{
            //
            //     })
            //     this.$message({
            //         message: '恭喜你，已成功重置密码！！',
            //         type: 'success'
            //     });
            // },
            yanzma(email){

                this.$axios.get('/text/queryemail?email='+this.ruleForm.email).then((res) => {
                });

                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            }
        }
    }

</script>

<style scoped>
    .fo-all{
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,#ada996,#f2f2f2,#dbdbdb,#eaeaea);
    }
    .re-box{
        margin: auto;
        position: absolute;
        top: 230px;
        left: 0;
        right: 0;
        width: 500px;
        padding: 40px;
        background: white;
        border-radius: 5px;
        border: 1px solid #97a8be;
        box-shadow:0px 0px  10px 5px #aaa;
    }
    .re-form{
        position: relative;
        width: 400px;
        margin: 0 auto;
        top: 30%;

    }
    .re-title{
        font-size: 60px;
        font-family: 仿宋;
        color: #f6faff;
        position: absolute;
        margin-bottom: 20px;
        top: 120px;
        width: 100%;
        text-align: center;

    }
    .img1 {
        position:absolute;
        height: 100%;
        width: 100%;
        left:0px;
        top:0px;
    }
    .re-a{
        color: red;
    }
    .re-login{
        position: absolute;
        right: 0;
        top: 60px;
    }
</style>
